1.前言
2.內容
3.提問
4.參考連結
今天將接續昨天的文章內容，繼續介紹三個類別的 widgets，分別為: Animation and motion widgets、Assets, images, and icon widgets 和 Async widgets (Section_2~Section_4)，讓我們開始吧!
請參考昨天鐵人賽文章的介紹: D23-解碼Flutter官方文件，一起來了解無障礙小部件(Accessibility widgets)
這個網頁主要介紹了 Flutter 中與動畫和運動相關的一些 widgets。以下是網頁中提到的一些主要 widgets 和相關的簡單描述：
以上的每個 widget 都有其特定的用途和應用場景，開發者可以根據需要選擇合適的 widget 來實現各種動畫效果。
接者，我們選取AnimatedBuilder class和AnimatedContainer class進行更詳細的介紹。
(1) AnimatedBuilder class
AnimatedBuilder 是 Flutter 中一個通用的 widget，用於構建動畫。以下是這個類別的一些主要資訊：
主要功能：
性能優化：
// Text('我不會變')就是一個預構建的子樹，它不會在每一帧都重新構建
AnimatedBuilder(
animation: animation,
builder: (BuildContext context, Widget? child) {
// 這裡的 child 不會在每一帧都重新構建
return SomeWidget(child: child);
},
child: const Text('我不會變'),
)
// 這個範例是一個基本的AnimatedBuilder的使用，它會根據animation的當前值構建一個widget。
AnimatedBuilder(
animation: animation,
builder: (BuildContext context, Widget? child) {
// 返回一個 widget，這個 widget 會根據 animation 的當前值進行構建
},
)
相關類別：
// Icon會在2秒內旋轉360度，而你不需要手動創建和管理AnimationController
TweenAnimationBuilder(
tween: Tween<double>(begin: 0, end: 2 * pi),
duration: Duration(seconds: 2),
builder: (BuildContext context, double angle, Widget? child) {
return Transform.rotate(angle: angle, child: child);
},
child: Icon(Icons.refresh),
)
構造函數：
這個構造函數定義了AnimatedBuilder，它需要一個Listenable類型的animation和一個TransitionBuilder類型的builder，並且可以選擇性地接收一個child。
AnimatedBuilder({
Key? key,
required Listenable animation,
required TransitionBuilder builder,
Widget? child,
})
// 這個例子中，AnimatedBuilder會根據animation的當前值來旋轉Icon。child參數是一個預構建的子樹，它會被傳入builder函數，這樣可以避免在每一帧都重新構建Icon。
AnimatedBuilder(
animation: animation,
builder: (BuildContext context, Widget? child) {
// 在這裡，animation.value 是動畫的當前值，它會讓 Icon 旋轉
return Transform.rotate(
angle: animation.value,
child: child, // 這裡的 child 是下面傳入的 Icon
);
},
child: const Icon(Icons.star, size: 50), // 這個 Icon 會被傳入 builder 函數
)
(2) AnimatedContainer class
AnimatedContainer 是 Flutter 中一個用於創建隨時間逐漸改變其值的容器的 widget。以下是這個類別的一些主要資訊：
主要功能：
// 在這個例子中，AnimatedContainer的寬度、高度和顏色會進行動畫過渡，但是內部的Text widget（子 widget）不會進行任何動畫過渡。
AnimatedContainer(
duration: Duration(seconds: 2),
width: 100,
height: 100,
color: Colors.red,
child: Text('Hello'),
)
使用場景：
當開發者需要在不同參數之間生成簡單的隱式動畫時，這個類別會非常有用。
// AnimatedOpacity會在_visible變量改變時，自動地在透明和不透明之間創建過渡動畫。
AnimatedOpacity(
opacity: _visible ? 1.0 : 0.0,
duration: Duration(seconds: 2),
child: const Text('Fade In/Out'),
)
對於更複雜的動畫，可能會需要使用 AnimatedWidget 的子類，例如 DecoratedBoxTransition，或者使用自定義的 AnimationController。
構造函數：
AnimatedContainer({
Key? key,
AlignmentGeometry? alignment,
EdgeInsetsGeometry? padding,
Color? color,
Decoration? decoration,
BoxConstraints? constraints,
EdgeInsetsGeometry? margin,
Matrix4? transform,
Widget? child,
Clip clipBehavior = Clip.none,
Curve curve = Curves.linear,
required Duration duration,
VoidCallback? onEnd,
})
重要屬性：
使用範例：
// 在這個例子中，AnimatedContainer 會在 1 秒的時間內改變其寬度、高度和顏色。
AnimatedContainer(
duration: Duration(seconds: 1),
width: 200.0,
height: 200.0,
color: Colors.red,
)
這個網頁主要介紹了與資源（Assets）、圖像（Images）和圖標（Icons）相關的小部件。提供了有關如何在Flutter中管理和顯示資源、圖像和圖標的基本信息，並且鏈接到了小部件目錄（widget catalog）以供查看更多小部件，以下是該網頁的主要內容：
資源包（Asset Bundles）
資源包含了應用程序可以使用的資源，例如圖像和字符串，訪問這些資源是異步的。
Material Design圖標（Material Design Icon）
這是一個顯示Material Design圖標的小部件。
圖像顯示小部件（Image Widget）
這是一個用於顯示圖像的小部件。直接顯示dart:ui.Image的小部件
這個網頁主要介紹了 Flutter 中與異步操作相關的一些 widgets。以下是網頁中提到的一些主要 widgets 和相關的簡單描述：
共有兩種 widget:
(1) FutureBuilder
基於 Future 的最新快照交互來構建自己的 widget。當 Future 完成時，會根據 Future 的結果來構建 widget。
(2) StreamBuilder
基於 Stream 的最新快照交互來構建自己的 widget。它會根據與 Stream 的最後一次交互來構建 widget。
使用場景：
這些 widgets 都是用於構建依賴於異步數據的 UI。例如，當你從網絡請求數據時，可以使用 FutureBuilder 或 StreamBuilder 來構建 UI，這樣當數據到達時，UI 會自動更新。
使用範例：
// 在這個 FutureBuilder 的例子中，當 fetchData 的 Future 完成時，會根據結果來構建 widget：如果有數據，會顯示數據；如果有錯誤，會顯示錯誤；如果 Future 還沒有完成，會顯示一個加載指示器。
FutureBuilder<String>(
future: fetchData(), // 返回 Future<String>
builder: (BuildContext context, AsyncSnapshot<String> snapshot) {
if (snapshot.hasData) {
return Text('Data: ${snapshot.data}');
} else if (snapshot.hasError) {
return Text('Error: ${snapshot.error}');
}
return CircularProgressIndicator(); // 加載中
},
)
下一步將詳細介紹上述兩個 widget 的差別:
(1) FutureBuilder class
FutureBuilder 是 Flutter 中一個基於 Future 的最新快照交互來構建自己的 widget。以下是這個類別的一些主要資訊：
主要功能：
FutureBuilder 能夠根據與 Future 的最新快照交互來構建 widget。它會在 Future 完成時，根據 Future 的結果來構建 widget。
管理 Future：
構建合同（Builder Contract）：
使用範例：
// 在這個 FutureBuilder 的例子中，當 fetchData 的 Future 完成時，會根據結果來構建 widget：如果有數據，會顯示數據；如果有錯誤，會顯示錯誤；如果 Future 還沒有完成，會顯示一個加載指示器
FutureBuilder<String>(
future: fetchData(), // 返回 Future<String>
builder: (BuildContext context, AsyncSnapshot<String> snapshot) {
if (snapshot.hasData) {
return Text('Data: ${snapshot.data}');
} else if (snapshot.hasError) {
return Text('Error: ${snapshot.error}');
}
return CircularProgressIndicator(); // 加載中
},
)
(2) StreamBuilder class
StreamBuilder 是 Flutter 中一個基於 Stream 的最新快照交互來構建自己的 widget。以下是這個類別的一些主要資訊：
主要功能：
使用場景：
構造函數：
StreamBuilder<T>({
Key? key,
T? initialData,
required Stream<T> stream,
required AsyncWidgetBuilder<T> builder,
})
重要屬性：
使用範例：
// 在這個 StreamBuilder 的例子中，當 streamOfIntegers 的 Stream 產生一個新值時，會根據該值來構建 widget：如果有數據，會顯示數據；如果有錯誤，會顯示錯誤；如果 Stream 還沒有產生值，會顯示一個加載指示器
StreamBuilder<int>(
stream: streamOfIntegers(), // 返回 Stream<int>
builder: (BuildContext context, AsyncSnapshot<int> snapshot) {
if (snapshot.hasData) {
return Text('Data: ${snapshot.data}');
} else if (snapshot.hasError) {
return Text('Error: ${snapshot.error}');
}
return CircularProgressIndicator(); // 加載中
},
)
Question: FutureBuilder<T> class和StreamBuilder<T> class具體的差別有哪些?
Ans:
數據源：
使用場景：
更新頻率：
請搜尋此網頁: Question，即可查詢筆者在閱讀Flutter官方文件遇到的疑問和對應參考說明。
What is Difference Between StreamBuilder and FutureBuilder In Flutter ?
此網址詳細解釋了在Flutter中StreamBuilder和FutureBuilder的區別，並通過實例展示了如何在Flutter應用中使用它們來處理異步操作。
7.6 異步UI更新（FutureBuilder、StreamBuilder）
這個頁面是《Flutter實戰》一書的一部分，介紹了如何使用FutureBuilder和StreamBuilder來實現異步UI更新，並提供了相關的代碼示例。
Asynchronous programming: Streams
此文件提供了有關Dart中異步編程的Streams的深入理解，解釋了如何使用Streams來處理一系列的異步事件。
Asynchronous programming: futures, async, await
這個Codelab專注於Dart的異步編程，特別是futures，async和await，提供了理論知識和實踐練習，幫助開發者更好地理解和使用異步編程。
當你學會了，嘗試去教人；當你獲得了，嘗試去給予
When you have learned, try to teach. When you get, try to give.
今天因緣際會被同事找去討論R language，順利解決套件版本衝突的問題，還順便交流幾個常用方法，非常開心有成就感🌟
iThome鐵人賽
看影片追技術